import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import {ThemeColor} from '../color/ThemeColor'
import {ButtonIconPosition, ButtonSize, ButtonStyle} from './utils'
import Icon from '../icon/Icon'
import {COLORS} from '../color'

interface ButtonLinkProps {
  href?: string
  to?: string
  color?: ThemeColor
  size?: ButtonSize
  style?: ButtonStyle
  className?: string
  iconPath?: string
  iconPosition?: ButtonIconPosition
  id?: string
  disabled?: boolean
  resizeInMobileResolution?: boolean
  hover?: 'light'
}

class ButtonLink extends Component<ButtonLinkProps> {
  render(): React.ReactNode {
    let {
      color,
      size,
      style,
      className,
      href,
      to,
      iconPath,
      iconPosition,
      id,
      disabled,
      resizeInMobileResolution,
      hover,
    } = this.props

    let classNameResult = `btn ${color || 'primary'} ${size || 'md'} ${
      iconPosition === 'right' ? 'icon-right' : 'icon-left'
    } ${resizeInMobileResolution ? 'resize-in-mobile' : ''} ${style || ''} ${
      disabled && 'disabled'
    } ${hover ? 'hover-' + hover : ''} ${className || ''}`
    if (disabled) {
      return (
        <span className={classNameResult} id={id}>
          <span className={'button-container'}>
            {iconPath && <Icon path={iconPath} color={COLORS.gray700} />}
            <span className={'button-content'}>{this.props.children}</span>
          </span>
        </span>
      )
    }
    if (to) {
      return (
        <Link to={to} className={classNameResult} id={id}>
          <span className={'button-container'}>
            {iconPath && <Icon path={iconPath} color={COLORS.gray700} />}
            <span className={'button-content'}>{this.props.children}</span>
          </span>
        </Link>
      )
    } else if (href) {
      return (
        <a href={href} className={classNameResult} id={id}>
          <span className={'button-container'}>
            {iconPath && <Icon path={iconPath} color={COLORS.gray700} />}
            <span className={'button-content'}>{this.props.children}</span>
          </span>
        </a>
      )
    }
  }
}

export {ButtonLink}
